<template>
  <div class="b-cont">
    <div>
      <cus-section class="b-cells" title="基本信息" m-color="#46CDCF" content-height="auto">
        <flex-box :gutter="0" flex-wrap="wrap" style="padding: 10px 8px 0;">
          <flex-box-item :span="0.5" class="b-cell">
            <flex-box align-items="stretch" class="b-cell-b">
              <div class="b-cell-name">费率类型：</div>
              <div class="b-cell-value">{{ detail.saleBuyType }}</div>
            </flex-box>
          </flex-box-item>
          <flex-box-item v-if="detail.saleBuyType === 'sale'" :span="0.5" class="b-cell">
            <flex-box align-items="stretch" class="b-cell-b">
              <div class="b-cell-name">托运人：</div>
              <div class="b-cell-value">{{ detail.customerName }}</div>
            </flex-box>
          </flex-box-item>
          <flex-box-item v-if="detail.saleBuyType === 'buy'" :span="0.5" class="b-cell">
            <flex-box align-items="stretch" class="b-cell-b">
              <div class="b-cell-name">承运人：</div>
              <div class="b-cell-value">{{ detail.carrierName }}</div>
            </flex-box>
          </flex-box-item>
          <flex-box-item :span="0.5" class="b-cell">
            <flex-box align-items="stretch" class="b-cell-b">
              <div class="b-cell-name">合同编号：</div>
              <div class="b-cell-value">{{ detail.contractNo }}</div>
            </flex-box>
          </flex-box-item>
          <flex-box-item :span="0.5" class="b-cell">
            <flex-box align-items="stretch" class="b-cell-b">
              <div class="b-cell-name">合同名称：</div>
              <div class="b-cell-value">{{ detail.contractName }}</div>
            </flex-box>
          </flex-box-item>
        </flex-box>
      </cus-section>
      <cus-section class="b-cells" title="费率信息" m-color="#46CDCF" content-height="auto">
        <flex-box :gutter="0" flex-wrap="wrap" style="padding: 0 8px 0 8px;">
          <el-table :data="detail.routePriceNewList" highlight-current-row border>
            <el-table-column label="运单类型" align="center" width="125" prop="surviceType" show-overflow-tooltip />
            <el-table-column label="路线类型" align="center" width="125" prop="routeDistanceType" show-overflow-tooltip />
            <el-table-column label="是否多司机" align="center" width="125" prop="teamYn" show-overflow-tooltip />
            <el-table-column label="结费类型" align="center" width="125" prop="chargeAdjustType" show-overflow-tooltip />
            <el-table-column label="出发地" align="center" width="125" prop="dptrAreaCdIdList" show-overflow-tooltip />
            <el-table-column label="到货地" align="center" width="125" prop="arrAreaCdIdList" show-overflow-tooltip />
            <el-table-column label="区域" align="center" width="125" prop="zoneCdNm" show-overflow-tooltip />
            <el-table-column label="重量区间起" align="center" width="125" prop="wtFr" show-overflow-tooltip />
            <el-table-column label="重量区间至" align="center" width="125" prop="wtTo" show-overflow-tooltip />
            <el-table-column label="重量单位" align="center" width="125" prop="wtUnitName" show-overflow-tooltip />
            <el-table-column label="危险品类型" align="center" width="125" prop="dangerType" show-overflow-tooltip />
            <el-table-column label="最低价" align="center" width="125" prop="minAmt" show-overflow-tooltip />
            <el-table-column label="最高价" align="center" width="125" prop="maxAmt" show-overflow-tooltip />
            <el-table-column label="金额" align="center" width="125" prop="basicAmt" show-overflow-tooltip />
            <el-table-column label="加急费" align="center" width="125" prop="driverHotDeliverRate" show-overflow-tooltip />
            <el-table-column label="到门费" align="center" width="125" prop="doortodoorFee" show-overflow-tooltip />
            <el-table-column label="现金折扣" align="center" width="125" prop="paycashDiscountRate" show-overflow-tooltip />
          </el-table>
        </flex-box>
      </cus-section>
    </div>
  </div>
</template>

<script>
import BaseInfoMixin from '@/mixins/BaseInfo'

export default {
  name: 'TerminalCustomerBaseInfo',
  mixins: [BaseInfoMixin]
}
</script>

<style lang="scss" scoped>
.b-cont {
  position: relative;
  padding: 0 50px 20px 20px;
}

.b-cells {
  margin-top: 25px;
}

.b-cell {
  padding: 0 10px;
  overflow: hidden;
  .b-cell-b {
    width: auto;
    padding: 8px;
    .b-cell-name {
      width: 110px;
      margin-right: 10px;
      font-size: 13px;
      flex-shrink: 0;
      color: #777;
    }
    .b-cell-name2 {
      width: 100%;
      margin-right: 10px;
      font-size: 13px;
      flex-shrink: 0;
      color: #777;
    }
    .b-cell-value {
      font-size: 13px;
      color: #333;
      white-space: pre-wrap;
      word-wrap: break-word;
    }
    .b-cell-foot {
      flex-shrink: 0;
      display: block;
      width: 15px;
      height: 15px;
      margin-left: 8px;
    }
  }
}

.f-item {
  padding: 3px 0;
  height: 25px;
  .f-img {
    position: block;
    width: 15px;
    height: 15px;
    padding: 0 1px;
    margin-right: 8px;
  }
  .f-name {
    color: #666;
    font-size: 12px;
    margin-right: 10px;
  }
}
</style>
